<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href='xiaomi.css' />

		<script type="text/javascript">
			window.onload = function() {
				//控制轮播图的切换
				var lunbt = document.getElementsByClassName('lunbt')[0];
				//		  var src=lunbt.getAttribute('src');
				var p = 1;
				setInterval(function() {
					lunbt.setAttribute('src', 'img/lbt' + p + '.jpg');
					p++;
					if(p == 8) {
						p = 1;
					}
				}, 1500);

				//控制tab导航选项栏的切换
				var lunbotu = document.getElementById('lunbotu_left');
				var lis = lunbotu.getElementsByTagName('li');
				var goodsinfo = document.getElementsByClassName('goods-info');
				for(i = 0; i < lis.length; i++) {
					lis[i].xuhao = i;
					//给li加鼠标移入事件
					lis[i].onmouseover = function() {
						//              			alert(this.xuhao);
						for(var i = 0; i < goodsinfo.length; i++) {
							goodsinfo[i].style.display = 'none';
						}
						goodsinfo[this.xuhao].style.display = 'block';
					}
					//给li加鼠标移出事件
					lis[i].onmouseout = function() {
						goodsinfo[this.xuhao].style.display = 'none';
					}

				}
				
				//明星单品滚动效果
				var star=document.getElementById('star');
//				var lis=starlist.getElementsByTagName('li');
                var speed=-10;
//              alert(star.style.left);
                setInterval(function() {
                	var old_left=parseInt(star.style.left);
//              	alert(star.style.left);
                	var new_left=old_left+speed;
                	if(new_left==-600){
//              		new_left=0;
                        speed=10;
                	}
                	if(new_left==0){
                		speed=-10;
                	}
                	star.style.left=new_left+'px';
				},100);
				
			}
		</script>
	</head>

	<body>
		<!--顶部广告区域-->
		<div id="top_ad">
			<a href=""></a>
		</div>

		<!--顶部导航区域-->
		<div id="nav">
			<div class="container">
				<!--导航栏左侧-->
				<div class='left'>
					<ul>
						<li>
							<a href="#">小米商城</a>
						</li>
						<li>
							<a href="#">MIMU</a>
						</li>
						<li>
							<a href="#">米聊</a>
						</li>
						<li>
							<a href="#">游戏</a>
						</li>
						<li>
							<a href="#">多看阅读</a>
						</li>
						<li>
							<a href="#">云服务</a>
						</li>
						<li>
							<a href="#">金融</a>
						</li>
						<li>
							<a href="#">米币</a>
						</li>
						<li>
							<a href="#">小米商城手机版</a>
						</li>
						<li>
							<a href="#">问题反馈</a>
						</li>
						<li>
							<a href="#">Select Region</a>
						</li>
					</ul>
				</div>
				<!--导航栏登录和购物车块右浮动-->
				<div class="right">
					<a href="#"><i></i>
						<span>购物车</span>
						<span>(0)</span>
					</a>
				</div>

				<div class="middle">
					<a href="#">注册</a>
					<a href="#">登录</a>
					<a href="#">消息通知</a>
				</div>
			</div>
		</div>

		<!--搜索区域部分-->
		<div id="search">
			<div class="container">
				<div class="logo">
					<a href=""></a>
				</div>
				<div class="search_nav">
					<ul>
						<li>
							<a href="#">小米手机</a>
						</li>
						<li>
							<a href="#">红米</a>
						</li>
						<li>
							<a href="#">笔记本</a>
						</li>
						<li>
							<a href="#">电视</a>
						</li>
						<li>
							<a href="#">盒子</a>
						</li>
						<li>
							<a href="#">新品</a>
						</li>
						<li>
							<a href="#">路由器</a>
						</li>
						<li>
							<a href="#">智能硬件</a>
						</li>
						<li>
							<a href="#">服务</a>
						</li>
						<li>
							<a href="#">社区</a>
						</li>
					</ul>
				</div>
				<div class="user_search">
					<form action="">
						<input type="text" />
						<input type="submit" name="" id="" value="搜索" />

					</form>
				</div>
			</div>
		</div>

		<!--轮播图部分-->
		<div id="lunbotu">
			<div class="container">
				<!--轮播图部分上侧导航条和图片-->
				<div class="top">
					<div id="lunbotu_left">
						<ul>
							<li>
								<a href="#">手机电话卡</a><i></i></li>
							<li>
								<a href="#">笔记本</a><i></i></li>
							<li>
								<a href="#">电视 盒子</a><i></i></li>
							<li>
								<a href="#">路由器 智能硬件</a><i></i></li>
							<li>
								<a href="#">移动电源 电池 插线板</a><i></i></li>
							<li>
								<a href="#">耳机 音箱</a><i></i></li>
							<li>
								<a href="#">保护套 贴膜</a><i></i></li>
							<li>
								<a href="#">线材 支架 存储卡</a><i></i></li>
							<li>
								<a href="#">鞋包 服饰 鞋 眼镜</a><i></i></li>
							<li>
								<a href="#">米兔 生活周边</a><i></i></li>
						</ul>
					</div>
					<div class="lunbotu_right">
						<a href="#">
							<img src="img/lbt1.jpg" class="lunbt" />
						</a>

					</div>
				</div>
				<!--导航栏tab切换-->
				<div class="goods-info" style="display: none;">
					<ul>
						<li>
							<div class="goods-box">
								<a href="#"><img src="img/note3-80-2.png" />
									<span>小米note3</span>
									<a href="#" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xmNOTE2-80.jpg" />
									<span>小米note2</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/mix2-80.png" />
									<span>小米MIX2</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-80.jpg" />
									<span>小米5s</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm6_80.png" />
									<span>小米6</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-plus-80.jpg" />
									<span>小米5sPlus</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80pc-5x.png" />
									<span>小米5X</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80-5a.png" />
									<span>红米5A</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/max2_80.jpg" />
									<span>小米MAX2</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/hmn4x80.png" />
									<span>红米note5A</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-80.jpg" />
									<span>小米手机5C</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/note3-80-2.png" />
									<span>红米note4X</span>
									<a href="" class='choose-goods'>选购</a>
								</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="goods-info" style="display: none;">
					<ul>
						<li>
							<div class="goods-box">
								<a href="#"><img src="img/note3-80-2.png" />
									<span>小米note3</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xmNOTE2-80.jpg" />
									<span>小米note2</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/mix2-80.png" />
									<span>小米MIX2</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-80.jpg" />
									<span>小米5s</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm6_80.png" />
									<span>小米6</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-plus-80.jpg" />
									<span>小米5sPlus</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80pc-5x.png" />
									<span>小米5X</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80-5a.png" />
									<span>红米5A</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/max2_80.jpg" />
									<span>小米MAX2</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/hmn4x80.png" />
									<span>红米note5A</span>
								</a>
							</div>
						</li>

					</ul>
				</div>
				<div class="goods-info" style="display: none;">
					<ul>
						<li>
							<div class="goods-box">
								<a href="#"><img src="img/5c_80.png" />
									<span>小米note3</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xmNOTE2-80.jpg" />
									<span>小米note2</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/mix2-80.png" />
									<span>小米MIX2</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-80.jpg" />
									<span>小米5s</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm6_80.png" />
									<span>小米6</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/xm5S-plus-80.jpg" />
									<span>小米5sPlus</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80pc-5x.png" />
									<span>小米5X</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/80-5a.png" />
									<span>红米5A</span>
								</a>
							</div>
						</li>
						<li>
							<div class="goods-box">
								<a href=""><img src="img/max2_80.jpg" />
									<span>小米MAX2</span>
								</a>
							</div>
						</li>

					</ul>
				</div>
				<div class="goods-info" style="display: none;width: 800px;height: 460px;background: #fff;"> </div>
				<div class="goods-info" style="display: none;width: 800px;height: 460px;background: #fff;"></div>
				<div class="goods-info" style="display: none;width: 800px;height: 460px;background: #fff;"></div>
				<div class="goods-info" style="display: none;width: 800px;height: 460px;background: #fff;"></div>
				<div class="goods-info" style="display: none;width: 800px;height: 460px;background: #fff;"></div>

				<!--轮播图部分底部购买和商品展示页面-->
				<div class="bottom">
					<div class="bottom_buy">
						<ul>
							<li>
								<a href="#"><i></i>选购手机</a>
							</li>
							<li>
								<a href="#"><i></i>企业团购</a>
							</li>
							<li>
								<a href="#"><i></i>F码通道</a>
							</li>
							<li>
								<a href="#"><i></i>米粉卡</a>
							</li>
							<li>
								<a href="#"><i></i>以旧换新</a>
							</li>
							<li>
								<a href="#"><i></i>话费充值</a>
							</li>
						</ul>

					</div>
					<div class="bottom_img">
						<a href="#"><img src="img/1.jpg" /></a>
						<a href="#"><img src="img/2.jpg" /></a>
						<a href="#"><img src="img/3.jpg" /></a>
					</div>
				</div>

			</div>

		</div>

		<!--明星单品部分-->
		<div id="starlist">
			<div class="container" >
				<div class="title-box">
					<h2 class="title">小米明星单品</h2>
				</div>
				<div class="star_con"  >
					<div class="box" style="width: 1200px;height:320px;overflow: hidden; position: absolute; ">
						<ul id="star" style="position: absolute;width:2000px;height:320px;left: 0;">
						<li class="rainbow-item-1">
							<a href="#"><img src="img/star1.png" /></a>
							<h3><a href="#" class="goods-name">小米MAX2</a></h3>
							<p class="desc">大屏大电量，享多重好礼</p>
							<p class="price">1399元起</p>
						</li>
						<li class="rainbow-item-2">
							<a href="#"><img src="img/star2.png" /></a>
							<h3><a href="#" class="goods-name">米家智能摄像机云台版</a></h3>
							<p class="desc">红外夜视，720P分辨率</p>
							<p class="price">199元</p>
						</li>
						<li class="rainbow-item-3">
							<a href="#"><img src="img/star3.png" /></a>
							<h3><a href="#" class="goods-name">小米手环2</a></h3>
							<p class="desc">OLED显示屏幕，升级计步算法</p>
							<p class="price">149元</p>
						</li>
						<li class="rainbow-item-4">
							<a href="#"><img src="img/star4.png" /></a>
							<h3><a href="#" class="goods-name">红米4X</a></h3>
							<p class="desc">4100mAh超长续航，8 核处理器</p>
							<p class="price">699元起</p>
						</li>
						<li class="rainbow-item-5">
							<a href="#"><img src="img/star5.jpg" /></a>
							<h3><a href="#" class="goods-name">米家压力IH电饭煲</a></h3>
							<p class="desc">智能烹饪，压力IH加热技术</p>
							<p class="price">999元</p>
						</li>
						<li class="rainbow-item-6">
							<a href="#"><img src="img/star6.png" /></a>
							<h3><a href="#" class="goods-name" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis">小米电视4A43英寸标准版</a></h3>
							<p class="desc">全高清HDR 四核高性能处理器</p>
							<p class="price">1799元</p>
						</li>
						<li class="rainbow-item-6">
							<a href="#"><img src="img/star6.png" /></a>
							<h3><a href="#" class="goods-name">小米电视4A43英寸标准版</a></h3>
							<p class="desc">全高清HDR 四核高性能处理器</p>
							<p class="price">1799元</p>
						</li>
						<li class="rainbow-item-2">
							<a href="#"><img src="img/star2.png" /></a>
							<h3><a href="#" class="goods-name">米家智能摄像机云台版</a></h3>
							<p class="desc">红外夜视，720P分辨率</p>
							<p class="price">199元</p>
						</li>
						<li class="rainbow-item-3">
							<a href="#"><img src="img/star3.png" /></a>
							<h3><a href="#" class="goods-name">小米手环2</a></h3>
							<p class="desc">OLED显示屏幕，升级计步算法</p>
							<p class="price">149元</p>
						</li>
						
					</ul>
					</div>
					
				</div>
			</div>
		</div>

		<!--内容展示部分-->
		<div class="goods">
			<!--家电部分-->
			<div id="electrical">
				<div class="container">
					<div class="title-box">
						<h2 class="title">家电</h2>
					</div>
					<div class="ele_con">
						<div class="ele-left">
							<a href=""><img src="img/ele.jpg" /></a>
						</div>
						<div class="ele-right">
							<ul>
								<li>
									<a href="#">
										<img src="img/ele1.png" />
										<h3 class="goods-name">小米电视 4A 55英寸</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">2549元</p>
										<div class="flag flag-saleof">
											享9折
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele2.jpg" />
										<h3 class="goods-name">小米电视 4 55英寸</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">3699元</p>
										<div class="flag flag-saleof">
											享9折
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele3.jpg" />
										<h3 class="goods-name">小米电视 4 49英寸</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">3299元</p>
										<div class="flag flag-saleof">
											享9.2折
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele4.png" />
										<h3 class="goods-name">小米电视 4A 55英寸</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">2549元</p>
										<div class="flag flag-saleof">
											享9.2折
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele5.png" />
										<h3 class="goods-name">小米电视 4A 65标准版</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">4599元</p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele6.jpg" />
										<h3 class="goods-name">小米电视 4A 55英寸</h3>
										<p class="desc">4K高清HDR/真四核64位高性能</p>
										<p class="price">2549元</p>
										<div class="flag flag-newgoods">
											新品
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/ele7.jpg" />
										<h3 class="goods-name">小米盒子3s</h3>
										<p class="desc">4KHDR人工智能机顶盒</p>
										<p class="price">329元</p>
										<div class="flag flag-postfree">
											免邮费
										</div>
									</a>
								</li>
								<li class="smallgoods">
									<a href="#">
										<img src="img/ele8.jpg" class="" />
										<h3 class="goods-name">盒子3增强版 </h3>
										<p class="price">399元</p>
									</a>
								</li>
								<li class="readmore">
									<div>
										<a href="#">
											<i class="more1"></i></a>
									</div>
									<p class="more2">浏览更多</p>
									<p class="more3">电视影音</p>

								</li>

							</ul>

						</div>
					</div>

				</div>
			</div>
			<!--智能部分-->
			<div id="zhineng">
				<div class="container">
					<div class="title-box">
						<h2 class="title">智能</h2>
					</div>
					<ul>
						<li>
							<a href="#">
								<img src="img/zhineng1.jpg" />
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng2.jpg" />
								<p class="goods-name">小米AI音箱</p>
								<p class="desc"></p>
								<p class="price">299元</p>
								<div class="flag flag-newgoods">
									新品
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng3.jpg" />
								<p class="goods-name">米家床头灯</p>
								<p class=" desc">如梦如幻，多彩光世界</p>
								<p class="price">249元</p>
								<div class="flag flag-newgoods">
									新品
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng4.jpg" />
								<p class="goods-name">小白智能摄像机大众版</p>
								<p class="desc">看得更清，看得更远</p>
								<p class="price">109元</p>
								<div class="flag flag-newgoods">
									新品
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng5.jpg" />
								<p class="goods-name">车载空气净化器(USB车充版)</p>
								<p class="desc">高效净化车内空气</p>
								<p class="price">449元</p>
								<div class="flag flag-newgoods">
									新品
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng6.jpg" />
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng7.jpg" />
								<p class="goods-name">米家行车记录仪</p>
								<p class="desc">晚上能拍清车牌的行车记录仪</p>
								<p class="price">349元</p>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng8.jpg" />
								<p class="goods-name">九号平衡车</p>
								<p class="desc">年轻人的酷玩具，骑行遥控两种玩法</p>
								<p class="price">1999元</p>
								<div class="flag flag-postfree">
									免邮费
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/zhineng9.jpg" />
								<p class="goods-name">米家Health血压计</p>
								<p class="desc">爸妈上手就会用的智能血压计</p>
								<p class="price">399元</p>
								<div class="flag flag-postfree">
									免邮费
								</div>
							</a>
						</li>
						<li class="smallgoods">
							<a href="#">
								<img src="img/zhineng11.jpg" class="" />
								<h3 class="goods-name">小白摄像机 </h3>
								<p class="price">399元</p>
							</a>
						</li>
						<li class="readmore">
							<a href="#">
								<div>
									<i class="more1"></i>
									<!--</a>-->
								</div>
								<p class="more2">浏览更多</p>
								<p class="more3">酷玩</p>
							</a>
						</li>

					</ul>
				</div>
			</div>

		</div>

	</body>

</html>